<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      .box {
        /* 指定此容器为弹性容器 */
        display: flex;
        /* flex-direction属性决定主轴的方向（即项目的排列方向）：值：row(默认值)、column*/
        /* flex-direction: row; */

        /* flex-wrap决定子项目是否换行：nowrap(默认值),wrap */
        /* flex-wrap:nowrap; */

        /* flex-flow:是上面两个属性的简写，默认row nowrap */
        /* flex-flow: row nowrap; */

        /* justify-content属性定义了项目在主轴上的对齐方式。
            flex-start(默认，起点)，flex-end(终点)，center（中心） ,space-between(两端对齐),space-around(两端等间距对齐)
        */
        justify-content: space-between;

        /* align-items属性定义项目在交叉轴上如何对齐 */
        /* flex-start(默认值，交叉轴起点)，flex-end(交叉轴终点)，center(交叉轴中心) */
        /* align-items: center; */

        width: 600px;
        height: 500px;
        border: 1px solid red;
        margin: 50px auto;
        padding: 0 10px;
      }

      .box .child {
        width: 100px;
        height: 80px;
        color: #fff;
        font-size: 40px;
      }

      .box .child1 {
        background-color: red;
      }
      .box .child2 {
        background-color: green;
      }
      .box .child3 {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="child child1">1</div>
      <div class="child child2">2</div>
      <div class="child child3">3</div>

  </body>
</html>
